<!-- 删除网关 -->
<template>
  <div>
    <a-modal 
      v-model="modalVisible" 
      @ok="handleDelete"
      @cancel="handleCancel"
      centered
      :maskClosable="false"
      :width="400"
      v-dragModal
    >
      <template slot="title">
        <!-- <i class="icon icon-error16f tip-icon"></i> -->
        <Iconfont class="icon tip-icon" type="icon-error16f"></Iconfont>
        <span>{{$t('Delete')+$t('Gateway')}}</span>
      </template>

      <div>
        <span v-if="$store.state.language=='zh'">
          删除网关 "{{}}" 后，将无法恢复！您确定要删除吗？
        </span>
        <span v-else>
          After deleting gateway "{{}}", it cannot be recovered! Are you sure you want to delete?
        </span>
      </div>

      <template slot="footer">
        <a-button @click="handleCancel" class="submit-btn">
          {{$t('Cancel')}}
        </a-button>
        <a-button class="error-btn submit-btn" @click="handleDelete" :loading="submitLoading" >
          {{$t('Delete')}}
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "DeleteGateway",
  props: {
    visible: {
      type: Boolean,
      required: true
    },
  },

  data() {
    return {
      modalVisible: false,
      submitLoading: false,
    }
  },

  watch: {
    visible(newValue) {
      this.modalVisible = newValue;
    }
  },

  methods: {
    //删除网关
    handleDelete() {

    },

    //关闭弹窗
    handleCancel() {
      this.$emit('closeOperateModal', 'del-gateway');
    },
  },
}
</script>
<style scoped>
  .tip-icon {
    color: var(--mainRedColor);
    margin-right: 8px;
  }
  .error-btn {
    background-color: var(--mainRedColor);
    border-color: var(--mainRedColor);
    color: #fff;
  }
  .submit-btn {
    width: 70px;
  }
  ::v-deep.ant-modal-header {
    border-bottom: none;
  }
  ::v-deep.ant-modal-footer {
    border-top: none;
  }
  ::v-deep.ant-modal-body {
    padding: 12px 24px;
  }
</style>